<template>
  <view>
    <jp-cropper-watermark :height="height" :maxHeight="max_width" :maxWidth="max_height" :url="src" :width="width"
                          mode="fixed" @cancel="oncancel" @ok="onok"></jp-cropper-watermark>
  </view>
</template>
<script>
import JpCropperWatermark
  from "../../uni_modules/jp-cropper-watermark/components/jp-cropper-watermark/jp-cropper-watermark.vue";

var app = getApp();
export default {
  components: {JpCropperWatermark},
  data() {
    return {
      src: '',
      width: 240,
      height: 240,
      max_width: 400,
      max_height: 500,
    }
  },
  onLoad(t) {
    this.src = t.imgSrc
  },
  methods: {
    onok(ev) {
      app.globalData.U.photo_s = ev.path;
      var a = uni.getStorageSync('COOK_U');
      uni.uploadFile({
        url: app.globalData.WWW + '/api/wxxcx/reg.php',
        filePath: ev.path,
        name: 'pic',
        formData: {
          submitok: 'photo_s_update',
          openid: a.openid
        },
        success: function (t) {
          uni.navigateBack({
            delta: -1
          });
        }
      });
    },
    oncancel() {
      uni.navigateBack({
        delta: -1
      });
    }
  }
}
</script>

<!--
<template>
  <view>
    <view style="width: 100%; height: 500rpx">
      <image-cropper
          id="image-cropper"
          :angle="angle"
          :disable_height="disable_height"
          :disable_ratio="disable_ratio"
          :disable_rotate="disable_rotate"
          :disable_width="disable_width"
          :height="height"
          :imgSrc="src"
          :limit_move="limit_move"
          :max_height="max_height"
          :max_width="max_width"
          :width="width"
          @imageload="loadimage($event, { tagId: 'image-cropper' })"
          @load="cropperload($event, { tagId: 'image-cropper' })"
          @tapcut="clickcut($event, { tagId: 'image-cropper' })"
      ></image-cropper>
    </view>
    <view class="hint">点击中间裁剪框可查看裁剪后的图片</view>
    <view class="bottom">
      <view class="ul">
        <view class="li" data-type="enlarge" @touchend.stop.prevent="end" @touchstart.stop.prevent="enlarge">
          <text class="i ico"></text>
          放大
        </view>
        <view class="li" data-type="narrow" @touchend.stop.prevent="end" @touchstart.stop.prevent="narrow">
          <text class="i ico"></text>
          缩小
        </view>
        <view class="li" data-type="rotate" @touchend.stop.prevent="end" @touchstart.stop.prevent="rotateL">
          <text class="i ico"></text>
          左旋转90°
        </view>
        <view class="li" data-type="rotate" @touchend.stop.prevent="end" @touchstart.stop.prevent="rotateR">
          <text class="i ico"></text>
          右旋转90°
        </view>
      </view>
      <button class="btn5" @tap="submit">
        <text class="ico"> 确定</text>
      </button>
    </view>
  </view>
</template>

<script>
import imageCropper from '../../components/image-cropper/image-cropper.vue';

require('../../res/www.a9a.cn.js');
var app = getApp();
export default {
  components: {
    imageCropper
  },
  data() {
    return {
      src: '',
      width: 200,
      height: 250,
      max_width: 400,
      max_height: 500,
      disable_rotate: false,
      disable_ratio: true,
      limit_move: true,
      cut_left: '',
      cut_top: '',
      angle: 0,
      disable_height: true,
      disable_width: true,
      cropper: {},
    };
  },
  onLoad: function (t) {
    this.cropper = this.zpSelectComponent('#image-cropper');
    console.log('获取图片=====', this.cropper)
    this.setData({
      src: t.imgSrc
    });
    t.imgSrc || this.cropper.upload();
  },
  methods: {
    cropperload: function (t, _dataset) {
      console.log('有值吗', t, _dataset)
      /* -&#45;&#45;处理dataset begin-&#45;&#45; */
      this.handleDataset(t, _dataset);
      /* -&#45;&#45;处理dataset end-&#45;&#45; */
    },

    loadimage: function (t, _dataset) {
      /* -&#45;&#45;处理dataset begin-&#45;&#45; */
      this.handleDataset(t, _dataset);
      /* -&#45;&#45;处理dataset end-&#45;&#45; */
      uni.hideLoading();
      this.cropper.imgReset();
    },

    clickcut: function (t, _dataset) {
      /* -&#45;&#45;处理dataset begin-&#45;&#45; */
      this.handleDataset(t, _dataset);
      /* -&#45;&#45;处理dataset end-&#45;&#45; */
      uni.previewImage({
        current: t.detail.url,
        urls: [t.detail.url]
      });
    },

    upload: function () {
      var that = this;
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (e) {
          uni.showLoading({
            title: '加载中'
          });
          var a = e.tempFiles[0].tempFilePath;
          that.cropper.imgReset();
          that.setData({
            src: a
          });
        }
      });
    },

    setWidth: function (t) {
      this.setData({
        width: t.detail.value < 10 ? 10 : t.detail.value
      });
      this.setData({
        cut_left: this.cropper.data.cut_left
      });
    },

    setHeight: function (t) {
      this.setData({
        height: t.detail.value < 10 ? 10 : t.detail.value
      });
      this.setData({
        cut_top: this.cropper.data.cut_top
      });
    },

    switchChangeDisableRatio: function (t) {
      this.setData({
        disable_ratio: t.detail.value
      });
    },

    setCutTop: function (t) {
      this.setData({
        cut_top: t.detail.value
      });
      this.setData({
        cut_top: this.cropper.data.cut_top
      });
    },

    setCutLeft: function (t) {
      this.setData({
        cut_left: t.detail.value
      });
      this.setData({
        cut_left: this.cropper.data.cut_left
      });
    },

    switchChangeDisableRotate: function (t) {
      t.detail.value
          ? this.setData({
            disable_rotate: t.detail.value
          })
          : this.setData({
            limit_move: false,
            disable_rotate: t.detail.value
          });
    },

    switchChangeLimitMove: function (t) {
      return false;
    },

    switchChangeDisableWidth: function (t) {
      return false;
    },

    switchChangeDisableHeight: function (t) {
      return false;
    },

    submit: function () {
      this.cropper.getImg(function (e) {
        app.globalData.U.photo_s = e.url;
        uni.navigateBack({
          delta: -1
        });
        var a = uni.getStorageSync('COOK_U');
        uni.uploadFile({
          url: app.globalData.WWW + '/api/wxxcx/reg.php',
          filePath: e.url,
          name: 'pic',
          formData: {
            submitok: 'photo_s_update',
            openid: a.openid
          },
          success: function (t) {
          }
        });
      });
    },

    rotateL: function (t) {
      this.cropper.setAngle((this.cropper.data.angle -= 90));
    },

    rotateR: function (t) {
      this.cropper.setAngle((this.cropper.data.angle += 90));
    },

    top: function () {
      var that = this;
      this.top = setInterval(function () {
        that.cropper.setTransform({
          y: -3
        });
      }, 16.666666666666668);
    },

    bottom: function () {
      var that = this;
      this.bottom = setInterval(function () {
        that.cropper.setTransform({
          y: 3
        });
      }, 16.666666666666668);
    },

    left: function () {
      var that = this;
      this.left = setInterval(function () {
        that.cropper.setTransform({
          x: -3
        });
      }, 16.666666666666668);
    },

    right: function () {
      var that = this;
      this.right = setInterval(function () {
        that.cropper.setTransform({
          x: 3
        });
      }, 16.666666666666668);
    },

    narrow: function () {
      var that = this;
      this.narrow = setInterval(function () {
        that.cropper.setTransform({
          scale: -0.02
        });
      }, 16.666666666666668);
    },

    enlarge: function () {
      var that = this;
      this.enlarge = setInterval(function () {
        that.cropper.setTransform({
          scale: 0.02
        });
      }, 16.666666666666668);
    },

    end: function (t) {
      clearInterval(this[t.currentTarget.dataset.type]);
    }
  }
};
</script>
<style>
@import 'cropper.css';
</style>
-->

